﻿import QtQuick 2.12
import QtQuick.Controls 2.12
import fui 1.0
FocusScope{
    id: _basePage
    objectName: "basePage"
    default property alias contentItem: _focusScope.data
    property string backgroundImage: ""

    Control{
        anchors.fill: parent
        topPadding: 15
        leftPadding: 30
        background: Image{
            source: backgroundImage
        }
        contentItem: FocusScope{
            id: _focusScope
            focus: true
            Column{
                width: parent.width
                H2{
                    text: qsTr("Button 按钮")
                }
                SpacerItem{
                    spacing: 14
                }
                P{
                   id: _p
                   text: qsTr("常用的操作按钮。")
                }
                SpacerItem{
                    spacing: 55
                }
                H3{
                    text: qsTr("基础用法")
                }
                SpacerItem{
                    spacing: 20
                }
                P{
                    text: qsTr("基础的按钮用法。")
                }
                SpacerItem{
                    spacing: 14
                }

                Control{
                    id: _demoButton
                    property bool isExpand: false
                    width: parent.width
                    bottomPadding: 1
                    leftPadding: 1
                    rightPadding: 1
                    topPadding: 1
                    background: Rectangle{
                        border.width: 1
                        border.color: "#ebebeb"
                        color: "#fff"
                    }
                    contentItem: Column{

                        Rectangle{
                            width: parent.width
                            height: 300
                            color: "red"
                        }
                        Rectangle{
                            id: _meta
                            visible: false
                            width: parent.width
                            height: 400
                            color: "#fafafa"
                        }
                        Button{
                            id: _button
                            width: parent.width
                            height: 43
                            background: Rectangle{
                                color: _button.hovered ? Qt.rgba(249/255,249/255,249/255,1) : Qt.rgba(1,1,1,1)
                            }
                            contentItem: Item{
                                FontLoader {
                                    id: _fontLoader
                                    source: "qrc:/fui/assets/font/element-icons.732389d.ttf"
                                }
                                Text {
                                    anchors.centerIn: parent
                                    font.family: _fontLoader.name
                                    font.pixelSize: 16
                                    lineHeight: 44
                                    lineHeightMode: Text.FixedHeight
                                    verticalAlignment: Text.AlignVCenter
                                    color: _button.hovered ? "#409eff" : "#d3dce6"
                                    text: _demoButton.isExpand ? (_button.hovered ? "\u{e78f}" + qsTr(" 隐藏代码") : "\u{e78f}") : (_button.hovered ? "\u{e790}" + qsTr(" 显示代码") : "\u{e790}")
                                }
                            }
                            onClicked: {
                                console.log(`button clicked`)
                                _demoButton.isExpand = !_demoButton.isExpand
                                _meta.visible = !_meta.visible
                            }
                            MouseArea{
                                id: _mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    _mouseArea.cursorShape = Qt.PointingHandCursor
                                }
                                onExited: {
                                    _mouseArea.cursorShape = Qt.ArrowCursor
                                }
                                onClicked: {
                                    mouse.accepted = true; // 允许鼠标事件传递给下方的元素
                                    _button.clicked()
                                }
                            }
                        }

                    }
                }
            }
        }
    }
}
